<template>
  <div class="home">
    <div class="all">
      <div class="world">Welcome to G&T餐厅{{this.loginName}}</div>
      <!-- <span>GT欢迎您</span> -->
      <div class="logout">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            <img
              src="../../assets/avatar01.gif"
              alt=""
            >
            <i class="el-icon-caret-bottom"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-plus">首页</el-dropdown-item>
            <el-dropdown-item
              divided
              @click.native="logout"
              icon="el-icon-circle-plus-outline"
            >退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

      </div>
    </div>
    <div class="lunbo">
      <el-carousel height='290px'>
        <el-carousel-item
          v-for="item in 4"
          :key="item"
        >
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="card">
      <div class="one">
        <div class="tese">
          <img
            src="../../assets/shuye.png"
            alt=""
          >
          <span>特色情景</span>
        </div>
        <div class="item">
          <img
            src="../../assets/dazaxie.png"
            alt=""
          >
          <span class="first">能吃到大闸蟹的餐厅</span><br>
          <span class="secone">[首要推荐]</span><br>
          <span class="third">此餐厅推出的纯正的阳澄湖大闸蟹，主厨以传统荷叶花雕蒸和清蒸.精心烹制，或以川香辣卤之。大闸蟹均配葱姜蒜等调料,使大闸蟹色香味俱全...</span>
        </div>
      </div>
      <div class="two">
        <div class="tese">
          <img
            src="../../assets//ren.png"
            alt=""
          >
          <span>商务宴请</span>
        </div>
        <div class="item">
          <img
            src="../../assets/shangwu.png"
            alt=""
          >
          <span class="first">本地最佳商务会所</span><br>
          <span class="secone">[HOT]</span><br>
          <span class="third">典雅的卡座、波浪形的吊灯以及归而合一、餐饮会客两相宜的包房，体现出主人的周到与细腻，让宾客们的吃喝玩和都开心...</span>
        </div>
      </div>
      <div class="three">
        <div class="tese">
          <img
            src="../../assets/anxin.png"
            alt=""
          >
          <span>情侣约会</span>
        </div>
        <div class="item">
          <img
            src="../../assets/qinglv.png"
            alt=""
          >
          <span class="first">草地、花园、户外婚礼的首选</span><br>
          <span class="secone">[强烈推荐]</span><br>
          <span class="third">参考价格：200元/人起。可容纳几百人的露天阳台免收租用费，源自巴黎的百年餐厅品牌。让每一对儿再这里办理婚宴的人都感到满意...</span>
        </div>
      </div>
      <div class="four">
        <div class="tese">
          <img
            src="../../assets/xiaolian.png"
            alt=""
          >
          <span>家人聚餐</span>
        </div>
        <div class="item">
          <img
            src="../../assets/family.png"
            alt=""
          >
          <span class="first">10人聚餐，性价比最高</span><br>
          <span class="secone">[强烈推荐]</span><br>
          <span class="third">此餐厅会做各种地方的菜，鲁菜、川菜、湘菜等等，主做川菜，适应于吃辣的大众群体；兼做粤菜、湘菜等等，适合不太吃辣的朋友们。量大实惠，价格优惠...</span>
        </div>
      </div>

    </div>

  </div>
</template>
<script>
export default {
     name:'home',
     data(){
       return {
         loginName:''
       }
     },
     methods:{
        logout() {
          this.$router.push({
            path:'/login'
          })
          this.$store.commit('loginout')
          sessionStorage.removeItem('loginStatus')
          sessionStorage.removeItem('loginName')
          // console.log(this.$store.state.loginStatus,this.$store.state.loginName);
        },
     },
     created(){
       this.loginName = sessionStorage.getItem('loginName')
     }
}
</script>
<style scoped>
.home {
  width: 99%;
  height: 100%;
}
.all {
  width: 100%;
}
.world {
  width: 60%;
  display: inline;
  /* height: 30px; */
  line-height: 50px;
  font-size: 20px;
  font-weight: bolder;
  margin-left: 1%;
}
.logout {
  display: inline;
  float: right;
  width: 8%;
}
.logout img {
  height: 45px;
  width: 45px;
}
.lunbo {
  width: 99%;
  /* margin-top: 20px; */
  margin-left: 1%;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.5;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-of-type(1) {
  background-image: url("../../assets/1.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.el-carousel__item:nth-of-type(2) {
  background-image: url("../../assets/2.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.el-carousel__item:nth-of-type(3) {
  background-image: url("../../assets/3.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.el-carousel__item:nth-of-type(4) {
  background-image: url("../../assets/4.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.card {
  width: 100%;
  margin-top: 15px;
  margin-left: 1%;
}
.one {
  width: 49.5%;
  height: 160px;
  background-color: #ffffff;
  display: inline-block;
  border: 1px solid grey;
  /* box-shadow:inset 0 0px 10px #000; */
}
.tese {
  width: 100%;
  height: 40px;
  /* background: red; */
}
.tese img {
  float: left;
  margin-left: 1%;
  margin-top: 10px;
}
.tese > span {
  float: left;
  line-height: 40px;
  margin-left: 5px;
}
.item {
  width: 100%;
  height: 115px;
}
.item img {
  float: left;
  margin-left: 1%;
  margin-top: 10px;
}
.item span {
  display: inline-block;
  margin-left: 10px;
  margin-top: 10px;
}
.item span:nth-of-type(1) {
  font-size: 18px;
  font-weight: bolder;
}
.item span:nth-of-type(2) {
  color: orange;
  font-size: 14px;
  margin-top: -5px;
}
.item span:nth-of-type(3) {
  position: absolute;
  font-size: 13px;
  color: grey;
  margin-top: 5px;
  width: 33%;
}
.two {
  width: 49.5%;
  height: 160px;
  background-color: #ffffff;
  display: inline-block;
  border: 1px solid grey;
}
.three {
  width: 49.5%;
  height: 160px;
  background-color: #ffffff;
  margin-top: 10px;
  display: inline-block;
  border: 1px solid grey;
}
.four {
  width: 49.5%;
  height: 160px;
  background-color: #ffffff;
  display: inline-block;
  border: 1px solid grey;
}
</style>
